

<template>
    <div class="mask" v-if="showAppro" @touchmove="changeMove" >
		    <div class="search-leader" refs="searchLeader">
            <i class="icon-search" @click='searchSubmit'></i>
            <input placeholder="中文搜索" v-model.trim="searchValue"  type="text" class="search-input">
            <span class="color-search" @click="close">取消</span>
        </div>

        <v-scroll :on-refresh="onRefresh" :topFixed="top" :on-infinite="onInfinite" :top="top" :dataList="scrollData">
            <!-- <div class="leader-info"><span>{{companyName}}</span><i >></i><span class="">{{deptName}}</span></div> -->
            <v-bread :itemList.sync="breadArr" :selected.sync="selected" @returnChecked="handleChecked"></v-bread>
            <v-list :listItem.sync="deptList" @returnClickNode="returnClickNode"></v-list>
            <div class="leader-info" :class="{'selectedBg':checked === index}" v-for="(info,index) in dataList" @click.stop="handleSelect(info,index)" :key="info.id">
                <div class="pic">
                  <!-- <img :src="handleImg(info)" alt="" /> -->
                  <div class="imgCircle">{{info.name && info.name.substr(-2)}}</div>
                </div>
                <div class="info-container">	
                  <div class="basic-info ellipsis">
                    <h2 >{{info.name}}</h2>
                
                  </div>
                  <div class="posi-info ">
                    <span>{{info.position_desc}}</span>
                  </div>
                </div>
            </div>
        </v-scroll>

    </div>
</template>
<script>
import Vue from "vue";
import { Spinner } from "mint-ui";
import Bus from '@/common/js/vueBus'
Vue.component(Spinner.name, Spinner);
import pullRefresh from "@/components/public/components/index"
import Bread from "@/components/leave/bread"
import listItem from "@/components/leave/listItem"
export default {
  data() {
    return {
      searchValue: "",
      List: [
        {
          label: "全部",
          unit: "yes"
        },
        {
          label: "招商局集团办公厅",
          unit: "A"
        },
        {
          label: "招商局集团办公厅总经理",
          unit: "B"
        },
        {
          label: "招商局集团办公厅总经理",
          unit: "C"
        },
        {
          label: "招商局集团办公厅总经理",
          unit: "yes"
        },
        {
          label: "招商局集团办公厅总经理",
          unit: "D"
        },
        {
          label: "招商局集团办公厅总经理",
          unit: "E"
        },
        {
          label: "招商局集团办公厅总经理",
          unit: "F"
        },
        {
          label: "招商局集团办公厅总经理",
          unit: "G"
        },
        {
          label: "招商局集团办公厅总经理",
          unit: "G"
        },
        {
          label: "招商局集团办公厅总经理",
          unit: "G"
        },
        {
          label: "招商局集团办公厅总经理",
          unit: "G"
        }
      ],
      checked: null,
      selectedBg:false,
      scrollTop: 0,
      showSearch: false,
      scrollData:{
        noFlag: false //暂无更多数据显示
      },
      top:'1rem',
      isEnd:false,

      itemList:[],
      selected:1,
    };
  },
  props:['showAppro','dataList','deptList','breadArr','deptName'],
  watch: {
    showMask: function(newVal) {
      if (newVal) {
        var self = this;
        Vue.nextTick(function() {
          self.$refs.optCont.scrollTop = self.scrollTop;
        });
      }
    },
    searchValue:function(newVal,oldValue){
       
        this.searchSubmit(newVal);
    }
  },
  computed:{

  },
  components: {
    'v-scroll':pullRefresh,
    'v-bread':Bread,
    'v-list':listItem
  },
  mounted:function(){
      console.log(this.breadArr,"breadArr");
  },
  methods: {
    searchSubmit(newVal) {
        let val = {
            name:newVal,
            setid:this.breadArr[0].setid
        };
        let clickArr = this.breadArr.slice(0,1);
        this.$emit('update:breadArr',clickArr);
        this.$emit("searchAppro",val,'searchName');

    },
    // SearchName:function(){
    //     Bus.$emit("searchValue",this.searchValue)
    // },
    changeMove: function(e) {
      e.stopPropagation();
    },
    onRefresh(done) {
        Bus.$emit("searchPage",1);

        done(); // call done
    },
    onInfinite(done) {

      if (this.isEnd) {
          this.isLoadMore();
          done();
          return;
      }
      Bus.$emit("searchPage");
      this.isLoadMore();   
      done();
    },
    isLoadMore:function(){
      let more = this.$el.querySelector('.load-more');
      if(this.isEnd) {
        more.style.display = 'none'; //隐藏加载条
        //走完数据调用方法
        this.scrollData.noFlag = true;
      } else {
        more.style.display = 'none'; //隐藏加载条
      }
    },

    handleImg : function(info){
          return this.Axios.baseURI + this.URL.getEmployeeImgNew.url + '?emplid=' + info.emplid + '&sex=' +(info.sex_descr === '女' ? 2 : 1) + '&token=' + localStorage.getItem('token');
    },
    handleSelect:function(info,index){
        this.checked = index;
        this.$emit('getSelPeo',info);
        setTimeout(()=>{
            this.checked = null;
            this.$emit("update:showAppro", false);
        }, 200);
    },
    close() {
        this.$emit('update:showAppro',false)
    },

    handleChecked:function(index){
       
        this.searchValue = '';
        if (index ===0) {
          let clickArr = this.breadArr.slice(0,1);
          this.$emit('searchAppro',clickArr[0],'deptSearch')
          this.$emit('update:breadArr',clickArr);
          this.selected = index;
        }

    },
    returnClickNode:function(val){
   
        this.selected = 1;
        this.searchValue = '';
        this.$emit('searchAppro',val,'deptSearch')
    },
    sendBumenAjax(data){

			
			let {setid,deptid} = data

			let params = {
				setid,
				deptid
			}

			this.Axios
          .Post(this.URL.getCcList.url,params)
          .then((res)=>{
            let data = res.data.datas
            let getCcList = this.getCcList;
            ({
              fristDept:getCcList.fristDept,
              deptList:getCcList.deptList,
              checkDept:getCcList.checkDept
            } = data)

          })

		},
  }
};
</script>
<style scoped>
.mask{
    position:fixed;
    top:0;
    bottom:0;
    left:0;
    right:0;
	  overflow-y: auto;
    background-color: rgba(255, 255, 255, 1);
    z-index:2000;
}
.leader-info .info-container .basic-info>h2{
	display:inline-block;
	font-size:0.36rem;
  line-height: 0.44rem;
  height: 0.44rem;
}
.leader-info .info-container .basic-info .sex{
	color:#888;
}
.leader-info .info-container .basic-info{
	margin-top:0.02rem;
	margin-bottom: 0.16rem;

}
.leader-info .info-container .posi-info{
	font-size:0.32rem;
}
.leader-info .ellipsis{
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.leader-info{
	padding-left:0.3rem;
	padding-top:0.1rem;
    border-bottom: 1px solid #eee;
    padding-bottom: 0.1rem;    
}
.leader-info>div{	
	display:inline-block;
}
.leader-info .info-container{
	padding-left:0.1rem;
	max-width: 6rem;
}
.mask .selectedBg{
    background-color:#ccc;
}
.pic{
	vertical-align: top;
	width:0.92rem;
	height:0.92rem;
}
.pic>div{
	width:0.92rem;
	height:0.92rem;
	border-radius:50%;
  font-size: 0.32rem;
  display: inline-block;
  line-height:0.92rem;
  text-align: center;
  font-weight: 500;
  color: #fff;
  background-color: #007de4;
  border-radius: 50%;
  vertical-align: top;
}


.search-input{
    width: 70%;
    border:none;
    display: inline-block;
    margin-left:0.2rem;
    padding: 0;
    font-size: 0.32rem;
    height:0.96rem;
    background-color:transparent;
}
.search-input:focus {
    outline: none;
}
.search-input::-webkit-input-placeholder {
    color: #888;
    font-size: 0.32rem;
}
.mask .search-leader{
  font-size:0.32rem;
  line-height:3;
  position:fixed;
  top:0;
  z-index:1000;
  background-color: #fff;
  width:100%;
  border-bottom:1px solid #ccc;
}
.color-search,.icon-search:before{
    color:#26a2ff
}
.icon-search{
    margin-top: 0.32rem;
    float: left;
}

.icon-search,.color-search{
    margin-left:0.3rem;
}
</style>

             
             
             
             
